<template>
	<!--创建容器-->
	<div class="containers">
	  <div class="canvas" ref="canvasRef"></div> 
    <div class="panel" id="js-properties-panel"></div> 
	</div>
  </template>
  
  
  <script lang='ts' setup>
  import {onMounted, ref, reactive} from 'vue'
  import {ElMessage} from 'element-plus'
  import BpmnModeler from 'bpmn-js/lib/Modeler.js'
  //默认模版
  import {xmlStr} from './xmlStr.ts' 

// 左边工具栏以及编辑节点的样式
import 'bpmn-js/dist/assets/diagram-js.css' 
import 'bpmn-js/dist/assets/bpmn-font/css/bpmn.css'
import 'bpmn-js/dist/assets/bpmn-font/css/bpmn-codes.css'
import 'bpmn-js/dist/assets/bpmn-font/css/bpmn-embedded.css'

//右侧工具栏样式
import '@bpmn-io/properties-panel/dist/assets/properties-panel.css'

//右侧工具栏
import {
  BpmnPropertiesPanelModule,
  BpmnPropertiesProviderModule,
} from 'bpmn-js-properties-panel'

import CamundaBpmnModdle from 'camunda-bpmn-moddle/resources/camunda.json'


  const state = reactive<any>({
	 bpmnModeler: null,
	 bpmnXmlStr:xmlStr ,
  })

  // 注意：必须先加载一个bpmn文件，新建就是加载一个空的bpmn文件，否则不能拖拽节点
  const createNewDiagram = async (bpmn: any) => {
	// 将字符串转换成图显示出来
	try {
    const result = await state.bpmnModeler.importXML(bpmn);
    // state.bpmnModeler.get('canvas').zoom('fit-viewport');
    const {warnings} = result;
    console.log(warnings);
  } catch (e) {
    ElMessage.error('打开模型出错，数据格式有误！')
    console.log('error--->', e)
  }
	
  };

  const canvasRef = ref()
  const init = () => {

	console.info("开始生成模版实例")

	// 生成实例
	state.bpmnModeler = new BpmnModeler({
	  container: canvasRef.value, // 获取到属性ref为“canvasRef”的dom节点

    propertiesPanel: {
      parent: '#js-properties-panel'
    },

    additionalModules: [
      BpmnPropertiesPanelModule,
      BpmnPropertiesProviderModule,

     ],

     moddleExtensions: {
      camunda: CamundaBpmnModdle
    }
	})
	createNewDiagram(state.bpmnXmlStr) // 新增流程定义
  };

  onMounted(() => {
	console.info("init")
	init()
  })
  </script>

<style scoped>

.containers{
	position: absolute;
	background-color: #ffffff;
	width: 95%;
	height: 95%;
}
.canvas{
	width: 100%;
	height: 100%;
}
.panel{
	position: absolute;
	right: 0;
	top: 0;
	width: 300px;
}


</style>
  
  